<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工作流重构测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        .success { background-color: #d4edda; border-color: #c3e6cb; }
        .error { background-color: #f8d7da; border-color: #f5c6cb; }
        .info { background-color: #d1ecf1; border-color: #bee5eb; }
        button { margin: 5px; padding: 8px 15px; cursor: pointer; }
        #test-canvas { width: 100%; height: 400px; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <h1>工作流重构测试页面</h1>
    
    <div class="test-section info">
        <h3>重构说明</h3>
        <p>此页面用于测试将 React、ReactDOM、ReactFlow 调用从 app-main-workflow.js 重构到 preload.js 中的结果。</p>
        <p>重构包括：</p>
        <ul>
            <li>✅ 将直接的 React.createElement 调用封装到 reactHelpers</li>
            <li>✅ 将 ReactDOM.createRoot 调用封装到 reactHelpers</li>
            <li>✅ 将 ReactFlow 组件创建封装到 reactHelpers</li>
            <li>✅ 添加了工作流初始化、更新、清理等工具方法</li>
            <li>✅ 添加了坐标投影和视图调整方法</li>
        </ul>
    </div>

    <div class="test-section">
        <h3>ReactHelpers 可用性测试</h3>
        <button onclick="testReactHelpersAvailability()">测试 ReactHelpers 可用性</button>
        <div id="react-helpers-result"></div>
    </div>

    <div class="test-section">
        <h3>React 库可用性测试</h3>
        <button onclick="testReactAvailability()">测试 React 库可用性</button>
        <div id="react-availability-result"></div>
    </div>

    <div class="test-section">
        <h3>工作流组件测试</h3>
        <button onclick="testWorkflowComponent()">测试工作流组件</button>
        <div id="workflow-component-result"></div>
        <div id="test-canvas"></div>
    </div>

    <script>
        function log(elementId, message, type = 'info') {
            const element = document.getElementById(elementId);
            const className = type === 'success' ? 'success' : type === 'error' ? 'error' : 'info';
            element.innerHTML = `<div class="${className}"><pre>${message}</pre></div>`;
        }

        function testReactHelpersAvailability() {
            try {
                if (typeof window.reactHelpers === 'undefined') {
                    log('react-helpers-result', '❌ ReactHelpers 不可用 - 可能 preload.js 没有正确加载', 'error');
                    return;
                }

                const methods = Object.keys(window.reactHelpers);
                const expectedMethods = [
                    'createRoot',
                    'createRootRender', 
                    'createElement',
                    'createReactFlowComponent',
                    'createBackground',
                    'createControls',
                    'createMiniMap',
                    'initWorkflow',
                    'isReactFlowAvailable',
                    'updateReactFlowInstance',
                    'unmountRoot',
                    'reinitWorkflow',
                    'projectPosition',
                    'fitView',
                    'getReactFlowInstanceInfo'
                ];

                const missing = expectedMethods.filter(method => !methods.includes(method));
                const extra = methods.filter(method => !expectedMethods.includes(method));

                let result = '✅ ReactHelpers 可用\n\n';
                result += `可用方法 (${methods.length}): ${methods.join(', ')}\n\n`;
                
                if (missing.length > 0) {
                    result += `❌ 缺少方法: ${missing.join(', ')}\n`;
                }
                if (extra.length > 0) {
                    result += `➕ 额外方法: ${extra.join(', ')}\n`;
                }

                log('react-helpers-result', result, missing.length > 0 ? 'error' : 'success');
            } catch (error) {
                log('react-helpers-result', `❌ 测试失败: ${error.message}`, 'error');
            }
        }

        function testReactAvailability() {
            try {
                const isAvailable = window.reactHelpers ? window.reactHelpers.isReactFlowAvailable() : false;
                
                let result = '';
                result += `React 可用: ${typeof window.React !== 'undefined'}\n`;
                result += `ReactDOM 可用: ${typeof window.ReactDOM !== 'undefined'}\n`;
                result += `ReactFlow 可用: ${typeof window.ReactFlow !== 'undefined'}\n`;
                result += `综合检查: ${isAvailable}\n`;

                if (isAvailable) {
                    result += '\n✅ 所有 React 库都已正确加载';
                    log('react-availability-result', result, 'success');
                } else {
                    result += '\n❌ 某些 React 库缺失';
                    log('react-availability-result', result, 'error');
                }
            } catch (error) {
                log('react-availability-result', `❌ 测试失败: ${error.message}`, 'error');
            }
        }

        function testWorkflowComponent() {
            try {
                if (typeof window.AppMainWorkflow === 'undefined') {
                    log('workflow-component-result', '❌ AppMainWorkflow 类不可用', 'error');
                    return;
                }

                // 创建工作流实例
                const workflow = new window.AppMainWorkflow();
                
                let result = '✅ AppMainWorkflow 类可用\n\n';
                result += `实例属性:\n`;
                result += `- isVisible: ${workflow.isVisible}\n`;
                result += `- reactFlowInstance: ${workflow.reactFlowInstance}\n`;
                result += `- reactRoot: ${workflow.reactRoot}\n`;
                result += `- nodes: ${workflow.nodes.length} 个节点\n`;
                result += `- edges: ${workflow.edges.length} 个边\n`;
                result += `- nodeCounter: ${workflow.nodeCounter}\n\n`;
                
                result += `节点类型配置:\n`;
                Object.keys(workflow.nodeTypes).forEach(type => {
                    const config = workflow.nodeTypes[type];
                    result += `- ${type}: ${config.icon} ${config.label} (${config.color})\n`;
                });

                log('workflow-component-result', result, 'success');
            } catch (error) {
                log('workflow-component-result', `❌ 测试失败: ${error.message}`, 'error');
            }
        }

        // 页面加载完成后自动运行测试
        window.addEventListener('DOMContentLoaded', () => {
            setTimeout(() => {
                testReactHelpersAvailability();
                testReactAvailability();
                testWorkflowComponent();
            }, 1000);
        });
    </script>
</body>
</html>
